<!-- 商品列表 -->
<template>
	<view class="good-page" @tap="open(itemid)" v-bind:key='itemid'>
		<view class="image">
			<image lazy-load='true' fade-show='true' :src="itempic"></image>
		</view>
		<view class="content">
			<view class="good-title">
				<text class="title-hidden">
					<text class="good-shop">天猫</text>
					<text> {{ itemtitle }}</text>
				</text>
			</view>
			<view class="money">
				<text class="coupon-price">
					<text style="font-size: 24rpx">¥<text style="font-weight: bold">{{itemendprice}}</text></text>
					<text class="volume">{{itemsale}}</text>
				</text>
			</view>
			<view class="coupon">
				<view class="coupon-box">
					<view class="couponmoney" v-if="couponmoney!=null">
						{{couponmoney}}元券
					</view>

				</view>
			</view>
			<view class="shop-name" v-if="shopname">
				<image style="height: 36rpx;width:36rpx;margin-right: 8rpx" src="../../static/img/shop.png"></image>
				<!-- 店铺名称 -->
				<view style="font-size: 24rpx;color: #999999;">{{shopname}}</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		name: "goods-list",
		props: [
			'isEnable', "shopname", "itempic", "itemtitle", "itemprice", "itemsale", "itemendprice", "couponmoney",
			"itemid","logo"
		],
		methods: {
			open(itemid) {
				debugger
				uni.navigateTo({
					url: "/pages/detail/info?itemid=" + itemid,
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/index.css";
	.good-page{
		margin:16rpx 16rpx 8rpx 16rpx;
		background: white;
		border-radius: 32rpx;
		display:flex;
		.image{
			image{
				width: 250rpx;
				height: 250rpx;
				border-radius: 10px;
			}
		}
		.content{
			padding: 0 10rpx;
			.good-title{
				display: flex;
				.title-hidden{
					height: 80rpx;
					font-size: 28rpx;
					margin-right: 4rpx;
					margin-left: 4rpx;
					width: 95%;
					max-lines:2;
					overflow: hidden;
					.good-shop{
						color: #FFFFFF;
						background: #E10A07;
						font-size: 24rpx;
						padding-left: 12rpx;
						padding-right: 12rpx;
						border-radius: 6rpx;
						margin-right: 8rpx;
						padding-top: 4rpx;
						padding-bottom: 4rpx;
					}
				}
			}
		    .money{
				font-size: 18px;
				.coupon-price{
					color: #E20C0A;
					.volume{
						font-size: 20rpx;color: #999999;margin-left: 16rpx;
					}
				}
			}
			.coupon{
				font-size: 24rpx;
				margin-right: 32rpx;
				display: flex;
				.coupon-box{
					background-size:100%;
					background-image: url(../../static/img/index/coupon.png);
					width: 54px;
					height: 32rpx;
					margin-top:26rpx;
					margin-bottom: 10rpx;
					border-radius: 10rpx;
					.couponmoney{
						font-size: 12px;
						color:#ec0000;
						text-align: center;
						display: block;
						line-height: 32rpx;
					}
				}
			}
			.shop-name{
				display: flex;
				margin-left: -4rpx;
				margin-top: 8rpx;
			}
		}
	}
</style>